<template>
    <v-touch 
    class="touch-item"
    v-on:panend="onPanEnd"
    v-on:panmove="onPanMove"
    v-bind:pan-options="{ direction: 'horizontal', threshold: 0 }">
    <div class="item-c">
      <menu-button></menu-button>
      <div class="item" 
      :style="{transform: 'translate('+ offsetX +'px)'}"
      @click="modifyCard">
        <p class="p-title">记录日记</p>
        <p class="p-desc">定义离开过渡的结束状态定义。在离开过渡被触发时生效</p>
        <div class="num-tip">3</div>
      </div>
    </div>

    </v-touch>
</template>

<script>
import MenuButton from '@/components/menuButton'
import bus from '../bus'

export default {
  name: 'touchItem',
  data () {
    return {
      offsetX: 0,
      maxLeftOffsetX: -200,
      minLeftOffsetX: -60,
      maxRightOffsetX: -this.maxLeftOffsetX,
      minRightOffsetX: -this.minLeftOffsetX,
      lastOffsetX: 0
    }
  },
  mounted () {
    bus.$on('on-share-click', () => {
      this.offsetX = 0
    })
  },
  methods: {
    modifyCard () {
      this.$router.push({name: 'UpdateCard'})
    },
    onPanMove (event) {
      if (event.deltaX < 0 && this.lastOffsetX === 0) {
        if (this.maxLeftOffsetX > event.deltaX) {
          return
        }
        this.offsetX = event.deltaX
      } else if (event.deltaX > 0 && this.lastOffsetX === this.maxLeftOffsetX) {
        if (this.maxRightOffsetX < event.deltaX) {
          return
        }
        this.offsetX = this.maxLeftOffsetX + event.deltaX
      }
    },
    onPanEnd (event) {
      if (event.deltaX < 0) {
        if (this.minLeftOffsetX < event.deltaX) {
          this.offsetX = 0
        } else {
          this.offsetX = this.maxLeftOffsetX
        }
      } else {
        if (this.minRightOffsetX > event.deltaX) {
          this.offsetX = this.maxLeftOffsetX
        } else {
          this.offsetX = 0
        }
      }
      this.lastOffsetX = this.offsetX
    }
  },
  components: {
    MenuButton
  }
}
</script>

<style scoped>
.num-tip{
  position: relative;
  top: -97px;
  left: -15px;
  align-self: flex-start;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.num-tip::before{
  content: '';
  border-top: 20px solid #66d0a3;
  border-left: 20px solid #66d0a3;
  border-bottom: 20px solid transparent;
  border-right: 20px solid transparent;
  width: 0;
  height: 0;
  position: absolute;
  z-index: -1;
  left: -6px;
  top: -6px;
}
.p-desc{
  margin: 0;
  flex: auto;
  text-overflow: ellipsis;
  max-height: 56px;
  overflow: hidden;
  font-size: 15px;
}
.p-title{
  height: 60px;
  font-size: 22px;
  font-weight: 400;
  margin: 0;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: 4px;
}
.item-c{
    width: 90%;
    height: 120px;
    overflow: hidden;
    border-radius: 6px;
}
.touch-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
  }
  .item{
    height: 120px;
    top: -120px;
    position: relative;
    background-color: #F1F1F1;
    transition: all .1s;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 5px #AAAAAA;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0 20px;
  }
</style>
